{% extends "base.html" %}{% load static %}
{% block title %}新闻资讯{% endblock %}
{% block style %}
    <style>
        .index {
            padding-top: 200px;
            display: flex;
            justify-content: center;
        }

        .index a {
            margin: auto;
        }

    </style>
{% endblock %}
{% block content %}
    <script src="{% static 'js/echarts-wordcloud.min.js' %}"></script>
    <div class="container" style="padding-top: 100px; padding-left: 20px">
        <form action="{% url 'system:chart5' %}" method="POST">
            <label>请输入查询药材：</label>
            <input type="text" name="keyword" required>
            <button type="submit" class="btn btn-success" style="margin-left: 50px;">提交</button>
        </form>
        {% if info.error %}
            <span style="color: red">不存在该种药材的数据记录！</span>
        {% elif info.data %}
            <br><br>
            <div id="chart" style="height: 700px"></div>
            <br><br>
        {% endif %}
    </div>
{% endblock %}
{% block script %}
    <script>
        var data =
        {{ info.data|safe }}
        var Chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: '新闻资讯词云图'
            },
            series: [{
                type: 'wordCloud',
                sizeRange: [20, 80],
                gridSize: 8,
                rotationRange: [-45, 90],
                rotationStep: 45,
                textRotation: [0, 45, 90, -45],
                shape: 'circle',
                width: '80%',
                height: '80%',
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: data
            }]
        };
        Chart.setOption(option);
    </script>
{% endblock %}